<template>
	<view class="coordination-outer-wrapper app">
		<view class="tab">
			<view :class="tabIndex==index?'active':''" v-for='(item,index) in tabArr' :key='index'
				@tap="tabSele(index)">
				<text>{{item.name}}</text>
				<text></text>
			</view>
		</view>
		<view class="list" v-if="list.length!==0">
			<view class="item" v-for='(item,index) in list' :key='index' @tap='goDetail(item.collaborativePurchase.id)'>
				<view class="top">
					<text class="title">{{item.collaborativePurchase.name}}</text>
					<view>
						<image src='/static/images/edit.png'></image>
						<text class='btn' @tap.stop='goEdit(item.collaborativePurchase.id)'>编辑</text>
					</view>
				</view>
				<text class='danhao'>采购单号:{{item.collaborativePurchase.id}}</text>
				<view class="imgs" v-if='item.images.length!==0'>
					<image :src='picDomain+n' v-for='n in item.images.slice(0,3)'></image>
					<!-- <image src='' v-for='n in 3-item.images.slice(0,3).length'></image> -->
					<text>共{{item.prodCount}}种</text>
				</view>
				<text class="date">{{item.collaborativePurchase.startTime}} 至
					{{item.collaborativePurchase.endTime}}</text>

			</view>
			<uni-load-more :status="more"></uni-load-more>
		</view>
		<view v-else class="noList">
			<image :src="pictureDomain+'not-found.png'"></image>
			<text>信息为空</text>
		</view>
		<view class="footer" @tap='establish'>
			<text>创建采购清单</text>
		</view>
	</view>
</template>

<script>
	var http = require("../../../utils/http.js");
	var config = require("../../../utils/config.js");
	export default {
		data() {
			return {
				pictureDomain: config.pictureDomain,
				tabArr: [{
					'name': '待发送'
				}, {
					'name': '收集中'
				}, {
					'name': '已完成'
				}, {
					'name': '异常'
				}],
				tabIndex: 0,
				// more:'noMore',
				status: 0, //0 待发送 1 收集中 2 已完成 3 异常
				list: [],
				info: {
					current: 1,
					size: 10,
				},
				pageTotal: null,
				picDomain: config.picDomain,
				shouji: false,
			}
		},
		computed: {
			more() {
				if (this.info.current === this.pageTotal) {
					return 'noMore'
				} else if (this.isLoading) {
					return 'loading'
				} else {
					return 'more'
				}
			}
		},
		onReachBottom() {
			if (this.info.current == this.pageTotal) return
			this.info.current += 1
			this.isLoading = true;
			this.getList()
		},
		onShow() {
			// this.tabIndex=0
			//获取列表详情
			this.list = []


			var pages = getCurrentPages(); //当前页面栈
			var currPage = pages[pages.length - 1]; //当前页面
			console.log(currPage.shouji)
			if (currPage.shouji) {
				this.status = 1
				this.tabIndex = 1
				this.shouji = false
			}
			this.getList()
		},
		methods: {
			//获取列表详情
			getList() {
				console.log(this.info)
				var param = {
					url: "/p/cp/listCP/" + this.status,
					method: "GET",
					data: this.info,
					callBack: res => {
						console.log(res)
						this.list = this.list.concat(res.records)
						this.isLoading = true
						this.pageTotal = res.pages
					}
				};
				http.request(param);
			},
			//跳转详情
			goDetail(id) {
				this.list = []
				uni.navigateTo({
					url: '../detail/index?id=' + id
				})
			},
			goEdit(id) {
				this.list = []
				uni.navigateTo({
					url: '../edit/index?id=' + id
				})
			},
			tabSele(index) {
				this.tabIndex = index
				this.status = index
				this.list = []
				this.info.current = 1

				this.getList()
			},
			//创建采购清单
			establish() {
				uni.navigateTo({
					url: '../edit/index?type="establish"'
				})
			}
		}
	}
</script>

<style lang='scss'>
	.coordination-outer-wrapper {
		background-color: #f4f4f4;
		width: 100vw;
		min-height: 100vh;

		view,
		text {
			box-sizing: border-box;
			line-height: 1;
		}

		.tab {
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 25rpx;
			position: fixed;
			top: 0;
			left: 0;
			background: #fff;
			z-index: 99;

			>view {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				height: 60rpx;

				text:nth-child(1) {
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.active {
				color: red;
				font-weight: bold;

				text:last-child {
					width: 50rpx;
					height: 2px;
					background-color: red;
					border-radius: 4rpx;
				}
			}
		}

		.list {
			display: flex;
			flex-direction: column;
			width: 690rpx;
			margin: 0 auto;
			padding: 100rpx 0;
			height: auto;

			view,
			text {
				font-size: 28rpx;
				color: #333;
			}

			.item {
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: column;
				height: auto;
				border-radius: 10rpx;
				padding: 20rpx;
				;
				background-color: #fff;
				border-radius: 15rpx;

				.top {
					display: flex;
					justify-content: space-between;

					.title {
						margin-right: auto;
						font-weight: bold;
						font-size: 32rpx;
						color: #333;
					}

					>view {
						display: flex;
						align-items: center;

						image {
							width: 50rpx;
							height: 50rpx;
						}
					}

					.btn {
						width: 80rpx;
						height: 45rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #333;
					}
				}

				.danhao,
				.date {
					margin: 25rpx 0;
					color: #c3c3c3;
					font-size: 30rpx;
				}

				.imgs {
					display: flex;
					/* justify-content: space-between; */
					align-items: center;

					image {
						width: 150rpx;
						height: 150rpx;
						margin-right: 20rpx;
						border-radius: 10rpx;
					}

					text {
						width: 100rpx;
						height: 100rpx;
						display: flex;
						justify-content: center;
						align-items: flex-end;
						color: #e43230;
						margin-left: auto;
					}
				}
			}
		}

		.noList {
			width: 100%;

			image {
				width: 400rpx;
				height: 300rpx;
				margin: 0 auto;
				padding-top: 200rpx;
			}

			text {
				display: flex;
				width: 100%;
				text-align: center;
				margin-top: 30rpx;
				justify-content: center;
				color: #9b9b9b;
			}
		}

		.footer {
			width: 750rpx;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-weight: bold;
			background-color: #e43230;
			margin: 0 auto;
			position: fixed;
			bottom: 0;
			left: 0;
			font-size: 32rpx;
		}
	}
</style>
